<template>
  <view class="page index">
  	<view class="user-info">
  		<view class="avatar" @click="avatar">
  			<image :src="userInfo.avatar || img" mode="aspectFill"></image>
  		</view>
			<view class="user">
				{{userInfo.nickname}} | {{userInfo.posts[0].name}}
			</view>
			<view class="user-message">
				<view class="item">
					<span class="iconfont icon">&#xe622;</span>
					<span>{{userInfo.mobile || '暂无'}}</span>
				</view>
				<view class="item">
					<span class="iconfont icon">&#xe659;</span>
					<span>{{userInfo.dept.name}}</span>
				</view>
			</view>
  	</view>
		<view class="menu">
			<view class="item">
				<navigator url="/pages/mine/mailList/index" hover-class="none" class="content">
					<view class="left">
						<span class="iconfont icon">&#xe61a;</span>
						<span class="text">通讯录</span>
					</view>
					<uni-icons type="right" size="20" color="#9a9a9a"></uni-icons>
				</navigator>
			</view>
			<view class="item">
				<navigator url="/pages/mine/database/index" hover-class="none" class="content">
					<view class="left">
						<span class="iconfont icon">&#xe67c;</span>
						<span class="text">资料库</span>
					</view>
					<uni-icons type="right" size="20" color="#9a9a9a"></uni-icons>
				</navigator>
			</view>
			<view class="item">
				<navigator url="/pages/mine/changePassword/index" hover-class="none" class="content">
					<view class="left">
						<span class="iconfont icon">&#xe683;</span>
						<span class="text">修改密码</span>
					</view>
					<uni-icons type="right" size="20" color="#9a9a9a"></uni-icons>
				</navigator>
			</view>
			<view class="item">
				<navigator url="/pages/mine/edit/index" hover-class="none" class="content">
					<view class="left">
						<span class="iconfont icon">&#xe619;</span>
						<span class="text">编辑资料</span>
					</view>
					<uni-icons type="right" size="20" color="#9a9a9a"></uni-icons>
				</navigator>
			</view>
			<view class="item">
				<view class="content" @click="handleLogout">
					<view class="left">
						<span class="iconfont icon">&#xe623;</span>
						<span class="text">退出登录</span>
					</view>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
	import img from "@/static/images/avatar.png"
	export default{
		data(){
			return {
				userInfo: {},
				img: img
			}
		},
		onShow() {
			this.userInfo = getApp().globalData.userInfo;
		},
		methods:{
			// 修改头像
			avatar(){
				uni.navigateTo({
					url: '/pages/mine/avatar/index'
				})
			},
			// 退出登录
			handleLogout() {
			  this.$modal.confirm('确定注销并退出系统吗？').then(() => {
			    this.$store.dispatch('LogOut').then(() => {
			      this.$tab.reLaunch('/pages/index/index')
			    })
			  })
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.index{
		padding: 124rpx 28rpx 0;
		.user-info{
			@include box;
			@include flex-c-start-center;
			overflow: visible;
			padding: 0 0 34rpx;
			.avatar{
				@include avatar(160);
				margin: -80rpx 0 0;
				background-color: #fff;
			}
			.user{
				color: #101010;
				font-size: 32rpx;
				padding: 36rpx 0 44rpx;
				font-weight: bold;
			}
			.user-message{
				@include flex-r-center-center;
				color: #9A9A9A;
				font-size: 26rpx;
				.item{
					@include flex-r-center-center;
					padding-right: 100rpx;
					&:last-child{
						padding-right: 0;
					}
					.icon{
						font-size: 30rpx;
						padding-right: 4rpx;
					}
				}
			}
		}
		.menu{
			padding: 20rpx 0 0;
			.item{
				padding: 0 0 20rpx;
				.content{
					padding: 24rpx 28rpx;
					@include box;
					@include flex-r-between-center;
					.left{
						@include flex-r-start-center;
						.icon{
							color: #4095E5;
							color: 32rpx;
							font-weight: bold;
						}
						.text{
							color: #000;
							font-size: 28rpx;
							padding-left: 34rpx;
						}
					}
				}
			}
		}
	}
</style>
